<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>控制台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="/plugins/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="/css/jfmgr/public.css" media="all">
    <style>
        .top-panel {
            border: 1px solid #eceff9;
            border-radius: 5px;
            text-align: center;
        }

        .top-panel > .layui-card-body {
            height: 60px;
        }

        .top-panel-number {
            /*line-height: 60px;*/
            font-size: 30px;
            width: 100%;
            border-right: 1px solid #eceff9;
        }

        .top-panel-tips {
            line-height: 30px;
            font-size: 12px
        }
    </style>
</head>
<body>
<!--<div class="layuimini-container">-->

    <div class="layuimini-container">
        <div class="layuimini-main">
            <fieldset class="table-search-fieldset">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">

                            <div class="layui-inline">
                                <label class="layui-form-label">学年</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="time" class="layui-input" id="test" placeholder=" - ">
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">学期</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="xq" value="1" title="第一学期" checked="">
                                    <input type="radio" name="xq" value="2" title="第二学期">
                                </div>
                            </div>


                            <div class="layui-inline">
                                <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                        lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>
        </div>
    </div>

    <div class="layui-row layui-col-space15">

        <div class="layui-col-xs12 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">校排名</div>
                <div class="layui-card-body">
                    <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                        1
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">院排名</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            1
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-xs12 layui-col-md3">

            <div class="layui-card top-panel">
                <div class="layui-card-header">专业排名</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            1
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-xs12 layui-col-md3">
            <div class="layui-card top-panel">
                <div class="layui-card-header">班级排名</div>
                <div class="layui-card-body">
                    <div class="layui-row layui-col-space5">
                        <div class="layui-col-xs9 layui-col-md9 top-panel-number">
                            1
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs12 layui-col-md7">

            <div id="echarts-records" style="background-color:#ffffff;min-height:500px;padding: 10px"></div>
        </div>
        <div class="layui-col-xs12 layui-col-md5">

            <div id="echarts-pies" style="background-color:#ffffff;min-height:500px;padding: 10px"></div>
        </div>

    </div>

<!--</div>-->
<script src="/plugins/layui/layui.js" charset="utf-8"></script>
<!--<script src="/plugins/module/lay-config.js" charset="utf-8"></script>-->
<script>
    layui.config({
        base: '/plugins/module/'
    });
    layui.use(['layer', 'echarts', 'laydate', 'form'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            echarts = layui.echarts;
        laydate = layui.laydate,
            form = layui.form;

        //年范围
        laydate.render({
            elem: '#test'
            , type: 'year'
            , range: true
        });


        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            console.log(result)
            layer.alert(result, {
                title: '最终的搜索信息'
            });

            // //执行搜索重载
            // table.reload('currentTableId', {
            //     page: {
            //         curr: 1
            //     }
            //     , where: {
            //         searchParams: result
            //     }
            // }, 'data');

            return false;
        });

        /**
         * 报表功能
         */
        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

        var optionRecords = {
            title: {
                text: '积分趋势图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {//图例
                //可以不用写会根据下面  series 的name   去自动加载
                //data: ['电子信息学院', '商学院', '管理学院', '艺术学院', '搜索引擎']=
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,  //从0刻度开始
                    // data: ['三月', '四月', '五月', '六月', '七月','八月']
                    data:[]
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine:{
                        lineStyle :{
                            color: '#CCCCCC'   //y轴刻度线颜色
                        }
                    }
                }

            ],
            series: [
                // {
                //     name: '电子信息学院',
                //     type: 'line',
                //     stack: '总量',
                //     // areaStyle: {},
                //     data: [120, 132, 101, 134, 90, 230]
                // },
                // {
                //     name: '商学院',
                //     type: 'line',
                //     // areaStyle: {},
                //     // markLine: {data: [{type: 'average', name: '平均值'}]},
                //     data: [220, 182, 191, 234, 290, 330]
                // },
                // {
                //     name: '管理学院',
                //     type: 'line',
                //     stack: '总量',
                //     // areaStyle: {},
                //     data: [150, 232, 201, 154, 190, 330]
                // },
                // // {
                // //     name: '艺术学院',
                // //     type: 'line',
                // //     stack: '总量',
                // //     // areaStyle: {},
                // //     data: [320, 332, 301, 334, 390, 330, 320]
                // // },
                // {
                //     name: '艺术学院',
                //     type: 'line',
                //     stack: '总量',
                //     label: {
                //         normal: {
                //             show: true,
                //             position: 'top'
                //         }
                //     },
                //     data: [820, 932, 901, 934, 1290, 1330]
                // }
            ]
        };


        $.ajax({
            type: 'get',
            url: '../api/zx1.json',//请求数据的地址
            //data:{userId:1020},
            dataType: "json",        //返回数据形式为json
            success:function(json){
                var Item = function(){
                    return       {
                        name: '',
                        type: 'line',
                        stack: '',
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        data: []
                    }
                };// series中的每一项为一个item,所有的属性均可以在此处定义
                //var legends = [];// 准备存放图例数据
                var Series = []; // 准备存放图表数据
                // var json = jsons.data;// 后台返回的json
                console.log(json);

                for(var i=0;i < json.list.length;i++){
                    var it = new Item();
                    it.name = json.list[i].name;// 先将每一项填充数据
                    //  legends.push(json[i].name);// 将每一项的图例名称也放到图例的数组中
                    it.data = json.list[i].data;
                    it.stack = i;//stack值不同  就不会堆叠
                    Series.push(it);// 将item放在series中
                }

                // option.series.data=jsons.
                optionRecords.xAxis[0].data = json.xcontent;// 设置X轴数据了
                // 折线图可设置上下两个X轴，必须是option.xAxis[0].data = json.xcontent
                // option.legend.data = legends;// 设置图例
                optionRecords.series = Series; // 设置图表
                echartsRecords.setOption(optionRecords);// 重新加载图表
            },
            error:function(){
                alert("数据加载失败！请检查数据链接是否正确");
            }
        });


        echartsRecords.setOption(optionRecords);


        /**
         * 环型图
         */
        var echartsPies = echarts.init(document.getElementById('echarts-pies'), 'walden');
        var optionPies = {
            //     title: {
            //         text: '指标名称-玫瑰图',
            //         left: 'center'
            //     },
            //     tooltip: {
            //         trigger: 'item',
            //
            //     },
            //     legend: {
            //         orient: 'vertical',
            //         left: 'left',
            //         data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            //     },
            //     series: [
            //         {
            //             name: '访问来源',
            //             type: 'pie',
            //             radius: '55%',
            //             center: ['50%', '60%'],
            //             roseType: 'radius',
            //             data: [
            //                 {value: 335, name: '直接访问'},
            //                 {value: 310, name: '邮件营销'},
            //                 {value: 234, name: '联盟广告'},
            //                 {value: 135, name: '视频广告'},
            //                 {value: 368, name: '搜索引擎'}
            //             ],
            //             emphasis: {
            //                 itemStyle: {
            //                     shadowBlur: 10,
            //                     shadowOffsetX: 0,
            //                     shadowColor: 'rgba(0, 0, 0, 0.5)'
            //                 }
            //             }
            //         }
            //     ]
            // };
            title: {
                //主标题文本，支持使用 \n 换行。
                text: '道德银行个人加分类型图',
                //副标题
                // subtext: '纯属虚构',
                left: 'center'
            },
            tooltip: {
                //数据项图形触发
                trigger: 'item',
                //字符串模板  饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
                // formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                //图例列表的布局朝向。horizontal 横向的
                // orient: 'vertical',   垂直居中
                bottom: 'bottom',    //距离底部
                //图标大小
                itemWidth: 10,
                itemHeight: 10,
                //修改图例组件的文字大小
                textStyle: {
                    color: "rgba(0,0,255,.5)",
                    fontsize: "12",
                },
                //series 中data有了名字    这里的可以省略
                // data: ['政治信仰', '道德素质', '学业成绩', '荣誉奖励', '勤俭奉献']
            },
            series: [
                {
                    //颜色
                    color: [
                        "#065abb",
                        "#bb3e26",
                        "#bbba3a",
                        "#bb18b1",
                        "#48bb1f",
                    ],

                    name: '道德银行个人加分类型图',
                    type: 'pie',
                    //修改饼形图的大小     可以是数组的形式 内外圆的区别   （半径）
                    // radius: '50%',
                    radius: ['40%', '60%'],
                    //修改饼形图在容器中的位置
                    center: ['50%', '50%'],


                    label: {
                        normal: {
                            formatter: ' {b}{c}\n {per|{d}%} ',
                            // formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                            // formatter: '{a} <br/>{b} : {c} ({d}%)',
                            //formatter: '{a|{b}}\n{hr|}\n{per|{d}%}',
                            rich: {
                                a: {
                                    color: '#999999',
                                    fontSize: 11,
                                    lineHeight: 20,
                                    align: 'center'
                                },
                                hr: {
                                    width: '100%',
                                    height: 0,
                                    alien: 'center'
                                },
                                per: {
                                    color: '#000000',
                                    align: 'center',
                                    fontSize: 15,
                                }
                            }
                        },

                    },

                    //后台拿
                    data: [
                        // {value: 335, name: '政治信仰'},
                        // {value: 310, name: '道德素质'},
                        // {value: 234, name: '学业成绩'},
                        // {value: 135, name: '荣誉奖励'},
                        // {value: 1548, name: '勤俭奉献'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        var brower = [];
        //获取数据
        $.ajax({
            type: 'post',
            url: '/pertype/findpertypepie',//请求数据的地址
            //data:{userId:1020},
            dataType: "json",        //返回数据形式为json
            success: function (result) {
                console.log(result)
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                $.each(result.list, function (index, item) {
                    brower.push({
                        name: item.name,
                        value: item.score
                    });
                });
                echartsPies.hideLoading();    //隐藏加载动画
                echartsPies.setOption({        //加载数据图表
                    series: [{
                        data: brower
                    }]
                });
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                echartsPies.hideLoading();
            }
        });

        echartsPies.setOption(optionPies);


        // echarts 窗口缩放自适应
        window.onresize = function () {
            echartsRecords.resize();
        }

    });
</script>
</body>
</html>
